<template>
    <div>
        <el-card>
            <el-form>
                <el-form-item>
                    <el-input placeholder="用户名" style=" width: 200px;" />
                    <el-button type="primary">查询</el-button>
                    <el-button>清空</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addUser">添加</el-button>
                    <el-button type="danger" :disabled="true">批量删除</el-button>
                </el-form-item>
            </el-form>
            <el-table border :data="userList">
                <el-table-column type="selection" width="55px" />
                <el-table-column type="index" label="序号" width="80px" align="center" />
                <el-table-column label="用户名" prop="username" width="150" />
                <el-table-column label="用户昵称" prop="nickName" />
                <el-table-column label="角色列表" prop="roleName" width="200" />
                <el-table-column label="创建时间" prop="gmtCreate" width="180" />
                <el-table-column label="更新时间" prop="gmtModified" width="180" />
                <el-table-column labels="操作" width="200" align="center" fixed="right">
                    <template v-slot="{ row }">
                        <el-button type="info" :icon="UserFilled" size="small"></el-button>
                        <el-button type="primary" :icon="Edit" size="small" @click="open(row)"></el-button>

                        <el-popconfirm :title="`确定要删除${row.username}吗?`" @confirm="deleteOne(row.id)">
                            <template #reference>
                                <el-button type="danger" :icon="Delete" size="small"></el-button>
                            </template>
                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[3, 5, 7, 9]"
                :small="small" :disabled="disabled" :background="background"
                layout=" prev, pager, next, jumper,->, sizes,total" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </el-card>
        <el-dialog v-model="outerVisible" :title="`${userState.user.id ? '修改' : '添加'}用户`">
            <template #default>
                <el-form label-width="120px" ref="userFormRefs" :model="userState.user" :rules="rules">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="userState.user.username" />
                    </el-form-item>
                    <el-form-item label="用户昵称" prop="nickName">
                        <el-input v-model="userState.user.nickName" />
                    </el-form-item>
                    <el-form-item v-if="!userState.user.id" label="用户密码" prop="password">
                        <el-input v-model="userState.user.password" />
                    </el-form-item>
                </el-form>
            </template>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="outerVisible = false">取消</el-button>
                    <el-button :loading="userState.userLoading" type="primary" @click="addOrUpdate">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
export default {
    name: 'User',
}
</script>
<script lang="ts" setup>
import { onMounted, reactive, ref, computed } from 'vue'
import { Edit, Delete, UserFilled } from '@element-plus/icons-vue'
import { reqGetUserList, reqDeleteUserOne, reqGetAddUser, reqUpdateUser } from '@/api/acl/user'
import type { UserState, UserModel } from '@/api/acl/model/userModel'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)

const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const userList = ref([])
const outerVisible = ref(false)
const userFormRefs = ref<FormInstance>()
const userState = reactive<UserState>({
    dialogUserVisible: false,
    userLoading: false,
    user: {
        username: '',
        nickName: '',
        password: ''
    },
})


const getRoleList = async () => {
    const result = await reqGetUserList(currentPage.value, pageSize.value)
    // console.log(result);
    total.value = result.total
    userList.value = result.items
}
const handleSizeChange = (val: number) => {
    pageSize.value = val
    currentPage.value = 1
    getRoleList()
}
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getRoleList()
}
onMounted(() => {
    getRoleList()
})



// 自定义密码校验
const validatePassword = function (rule: any, value: any, callback: any) {
    if (!value) {
        callback('密码必须输入')
    } else if (!value || value.length < 6) {
        callback('密码不能小于6位')
    } else {
        callback()
    }
}
// 添加修改的校验
const rules = {
    username: [
        { required: true, message: '用户名必须输入', trigger: 'blur' },
        { min: 4, message: '用户名不能小于4位', trigger: 'blur' }
    ],
    password: [
        { required: true, validator: validatePassword, trigger: 'change' }
    ]
}

// 删除单个
const deleteOne = async (id: number) => {
    await reqDeleteUserOne(id)
    ElMessage.success('删除用户成功……')
    getRoleList()
}

// 点击修改按钮
const open = (row: UserModel) => {
    outerVisible.value = true
    userState.user = row

}

// 点击添加按钮
const addUser = () => {
    userState.user = {
        username: '',
        nickName: '',
        password: ''
    },
        outerVisible.value = true
}

// 添加/保存
const addOrUpdate = async () => {
    await userFormRefs.value?.validate()
    const { user } = userState

    try {
        userState.userLoading = true
        if (userState.user.id) {
            await reqUpdateUser(user)
            ElMessage.success('修改用户成功……')
            outerVisible.value = false
        } else {
            await reqGetAddUser(user)  // 添加

        }

    } catch (error) {
        console.log(error);
        userState.userLoading = false

    }




}


</script>

<style scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>